<template>
<div class="layout">
  <head :backFlag="false" title="Categories"></head>

  <div style="flex:1;">
    <!-- <div class="tabr">
      <div class="tabItem" @click="tabClick(index)" v-for="(item, index) in navList" :key="index">
        <text :class="[tabCurrentIndex==index?'on':'off']">{{item.text}}</text>
      </div>
    </div>-->

    <slider class="slider" @change="slideChange" :index="tabCurrentIndex">
      <div class="sliderContent" v-for="(item, index) in navList" :key="index">
        <div class="header">
          <div class="input-box" @click="searchClick()">
            <input class="input" placeholder="iphoneX" placeholder-style="color:#c0c0c0;" />
            <text class="iconfont iconSearch">&#xe62a;</text>
          </div>
        </div>
        <div class="category-list">
          <!-- 左侧分类导航 -->
          <scroller class="scrollerleft">
            <div
              class="leftrow"
              v-for="(category,indexc) in item.List"
              :key="category.id"
              :class="[indexc==item.leftId?'leftrowon':'']"
              @click="showCategory(indexc,index)"
            >
              <div class="lefttext">
                <text class="cateName">{{category.name}}</text>
              </div>
            </div>
          </scroller>
          <scroller class="scrollerright">
            <!-- 右侧子导航 -->
            <div v-for="(category,indexs) in item.List" :key="category.id">
              <div class="categoryList" v-if="indexs==item.leftId">
                <div class="catelist" v-for="(box,i) in category.two" :key="i">
                  <text class="catetext">{{box.name}}</text>
                  <div class="listBox">
                    <div
                      class="listitem"
                      v-for="(itemc,index) in box.three"
                      :key="index"
                      @click="searchClick(itemc,item.ttype)"
                    >
                      <image class="itemImg" :src="itemc.thumb" />
                      <text class="itemName">{{itemc.name}}</text>
                    </div>
                    <div class="listitema"></div>
                    <div class="listitema"></div>
                  </div>
                </div>
              </div>
            </div>
          </scroller>
        </div>
      </div>
    </slider>
  </div>
</div>
</template>
<script>
import { get_category_list, get_all_category_list } from "../../mixin/ajax";

export default {
  props: {
    userId: {
      default: ""
    }
  },
  data() {
    return {
      tabCurrentIndex: 0,
      showCategoryIndex: 0,
      typeClass: "used",
      parentid: "",
      refreshing: false,
      navList: [
        {
          hasMore: true,
          leftId: 0,
          type: 1,
          ttype: "0",
          page: 1,
          text: "Brand new",
          loadingType: "more",
          total: 0,
          List: []
        }
      ],
      //分类列表
      categoryList: []
    };
  },
  created() {
    this.getGoodList(1);
  },
  methods: {
    loadData(user_id) {
      // this.userId = user_id;
      this.getGoodList(1);
    },
    onrefresh(event) {
      let that = this;
      that.loadData();
    },
    getGoodList(type) {
      this.refreshing = true;
      get_all_category_list({ type: 1 }, (res, flag) => {
        this.refreshing = false;
        if (flag) {
          if (!this.parentid) {
            let list = res.data;
            var pref = weex.requireModule("storage");
            pref.setItem("categroy1", JSON.stringify(list));
            pref.setItem("categroy2", JSON.stringify(list));
            this.navList.forEach(item => {
              Object.assign(item, { List: list, loaded: true });
              this.$set(item, "List", list);
            });
          }
        }
      });
    },
    switchType(type) {
      if (this.typeClass == type) {
        return;
      }
      this.typeClass = type;
    },
    searchClick(data, setype) {
      if (!data) {
        this.push("root:app/goods/searchGoods.js");
      } else {
        let parmar = {
          name: data.name,
          img: data.thumb,
          types: setype,
          id: data.id
        };
        this.push("root:app/goods/searchGoods2.js", parmar);
      }
    },
    tabClick(index) {
      if (this.tabCurrentIndex == index) {
        return false;
      }

      this.tabCurrentIndex = index;
      // this.getGoodList("tabChange");
    },
    slideChange(index) {
      if (this.tabCurrentIndex == index.index) {
        return false;
      }
      this.tabCurrentIndex = index.index;
    },
    //分类切换显示
    showCategory(index, id) {
      // this.showCategoryIndex = index;
      this.navList[id].leftId = index;

      // this.parentid = id;
      // this.getGoodList();
    },
    toCategory(e) {},
    //搜索跳转
    toSearch() {}
  }
};
</script>
<style scoped>
.tabr {
  height: 100px;
  width: 700px;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.tabItem {
  height: 70px;
  width: 280px;

  padding: 0 2px;
  justify-content: center;
  align-items: center;
}

.navbar {
  height: 90px;
  width: 750px;
  flex-direction: row;
}

.nav-item {
  height: 90px;
  padding: 0 20px;
  margin: 0 30px;
  line-height: 90px;
  font-size: 30px;
  color: #333333;
}

.current {
  border-bottom-color: #ba8833;
  border-bottom-width: 4px;
  border-bottom-style: solid;
  color: #ba8833;
}

.slider {
  flex: 1;
  position: relative;
  width: 750px;
  display: flex;
  /* background-color: #41EFF2; */
}

.sliderContent {
  width: 750px;
  position: absolute;
  background-color: #fff;
  flex: 1;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
}

.off {
  line-height: 70px;
  height: 70px;
  /* border-bottom-width: 8px; */
  /* border-bottom-color: #FFF; */
  /* border-bottom-style: solid; */

  font-size: 30px;
}

.on {
  border-bottom-width: 8px;
  border-bottom-color: #ba8833;
  border-bottom-style: solid;
  color: #ba8833;
  line-height: 70px;
  font-size: 30px;
  height: 70px;
}

.iconfont {
  font-family: iconfont;
}

.leftIcon {
  color: #ffffff;
  font-size: 40px;
}

.layout {
  background-color: #f2f2f2;
  flex: 1;
  /* background-color: #000000; */
}

.scroller {
  flex: 1;
  background-color: #f06c7a;
}

.header {
  width: 750px;
  height: 100px;
  display: flex;
  align-items: center;
  flex-direction: row;
  background-color: #fafafa;
  justify-content: center;
}

.maskClack {
  position: fixed;
  left: 0;
  bottom: 0;
  right: 0;
  top: 0;
  justify-content: center;
  align-items: center;
  background-color: transparent;
}
.refresh {
  justify-content: center;
  align-items: center;
}
.indicator {
  width: 40px;
  height: 40px;
  margin: 10px;
}
.input-box {
  width: 600px;
  height: 60px;
  background-color: #f5f5f5;
  border-radius: 30px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
}

.input {
  padding-left: 28px;
  height: 28px;
  font-size: 28px;
  background-color: #f5f5f5;
}

.iconSearch {
  margin-right: 15px;
  font-size: 30px;
  color: #999;
}

.category-list {
  flex: 1;
  /* background-color:#02993C; */
  flex-direction: row;
  position: absolute;
  width: 750px;
  left: 0;
  top: 100px;
  bottom: 0;
  right: 0;
}

.scrollerleft {
  /* flex: 2; */
  background-color: #f2f2f2;
  padding: 0;
  position: absolute;
  width: 213px;
  bottom: 0;
  left: 0;
  top: 0;
}

.leftrow {
  widows: 213px;
  height: 90px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f2f2f2;
}

.leftrowon {
  height: 90px;
  background-color: #fff;
  border-left-width: 4px;
  border-left-style: solid;
  border-left-color: #ba8833;
}

.lefttext {
  flex: 1;
  font-size: 26px;
  display: flex;
  justify-content: center;
  color: #3c3c3c;
  align-items: center;
}
.cateName {
  font-size: 26px;
  text-align: center;
}

.scrollerright {
  /* flex: 5; */
  /* background-color: #FFFFFF; */
  position: absolute;
  width: 537px;
  bottom: 0;
  left: 213px;
  top: 0;
}

.categoryList {
  width: 537px;
  /* background-color: #f2f2f2; */
}

.catelist {
  width: 537px;
  background-color: #fff;
  padding-top: 20px;
  padding-bottom: 20px;
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.catetext {
  width: 537px;
  text-align: center;
  font-size: 30px;
  margin-bottom: 15px;
}

.listBox {
  width: 537px;
  flex-direction: row;
  justify-content: space-around;
  flex-wrap: wrap;
}

.listitema {
  width: 170px;
}

.listitem {
  width: 170px;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 15px;
}

.itemImg {
  width: 130px;
  height: 130px;
  background-color: #f2f2f2;
  margin-bottom: 10px;
}

.itemName {
  width: 170px;
  text-align: center;
  font-size: 18px;
}

.catebanner {
  border-radius: 10px;
}

.block {
  position: absolute;
  width: 0px;
  left: 0;
}

.text {
  width: 200px;
  position: relative;
  font-size: 28px;
  display: flex;
  justify-content: center;
  color: #3c3c3c;
}

.block {
  width: 10px;
  height: 80%;
  top: 10%;
  background-color: #f06c7a;
}

.text {
  font-size: 30px;
  font-weight: 600;
  color: #2d2d2d;
}

.row {
  width: 200px;
  height: 90px;
  display: flex;
  align-items: center;
}

image {
  width: 100%;
}

.right {
  width: 76%;
  left: 24%;
}

.category {
  width: 550px;
}

.list {
  margin-top: 40px;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.box {
  width: calc(71.44vw / 3);
  margin-bottom: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.text {
  margin-top: 5px;
  width: 100%;
  display: flex;
  justify-content: center;
  font-size: 26px;
}
</style>
